tutorial project [Front-end🦁] #13 Grid Project 복습, holy grail layout grid 에 대해 간단하게 복습하고 어제 만든 holy grail layout 도 flex 대신 grid를 사용해서 다시 만들어 보았다. grid + animation 거의 보자마자 pespective랑 transform, transtion 줘서 구현하는거 아냐? 하고 호기롭게 시작했는데, 맘대로 되지 않았다. 캐릭터 애니메이션 붙이기 클릭 이벤트를 C... frontCSStutorial projecthtmlCSS [Front-end🦁] #12 Flex Project 웹폰트로도 많이 사용한다. flex 복습 기본 속성들에 대해서 복습했다. margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다. flex-start, stretch의 다른 점 : 전자는 element의 높이를 살려서 가고, stretch는 container에 맞춰서 늘려줌. menu 메뉴를 눌렀을 때, sub-메뉴가 나오는 형태의 layout을 함께 개발했다. PC 환경에서... frontCSStutorial projecthtmlCSS [Front-end] #7.5 tablet layout / 반응형 web 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 태블릿 클론 1 나는 처음에 nav li 사이즈를 12.5%로 줄여서 모든 버튼이 width가 줄어도 화면에 나타나도록 구현했었는데, 화면 크기가 작은 탭으로 접속한다면 버튼이 너무 답답할 수 있다는 문제가 있다. ... frontCSStutorial projecthtmlCSS [Front-end🦁] #11 1만 시간의 법칙 + 반응형 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 컴퓨터 화면에 맞춰서 디자인 요소들 픽셀에 정확히 맞추고, @media 태그를 이용해서 max-width: 360px 에 맞춘 반응형 페이지를 손보았다. 오늘 수업까지 듣고 디자인을 픽셀 단위로 맞추는 것까지는 실무의 범위인 것 같아서 제외하고, 더 반응형으로 만들어보려고... frontCSSprojecttutorial projecthtmlCSS
[Front-end🦁] #13 Grid Project 복습, holy grail layout grid 에 대해 간단하게 복습하고 어제 만든 holy grail layout 도 flex 대신 grid를 사용해서 다시 만들어 보았다. grid + animation 거의 보자마자 pespective랑 transform, transtion 줘서 구현하는거 아냐? 하고 호기롭게 시작했는데, 맘대로 되지 않았다. 캐릭터 애니메이션 붙이기 클릭 이벤트를 C... frontCSStutorial projecthtmlCSS [Front-end🦁] #12 Flex Project 웹폰트로도 많이 사용한다. flex 복습 기본 속성들에 대해서 복습했다. margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다. flex-start, stretch의 다른 점 : 전자는 element의 높이를 살려서 가고, stretch는 container에 맞춰서 늘려줌. menu 메뉴를 눌렀을 때, sub-메뉴가 나오는 형태의 layout을 함께 개발했다. PC 환경에서... frontCSStutorial projecthtmlCSS [Front-end] #7.5 tablet layout / 반응형 web 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 태블릿 클론 1 나는 처음에 nav li 사이즈를 12.5%로 줄여서 모든 버튼이 width가 줄어도 화면에 나타나도록 구현했었는데, 화면 크기가 작은 탭으로 접속한다면 버튼이 너무 답답할 수 있다는 문제가 있다. ... frontCSStutorial projecthtmlCSS [Front-end🦁] #11 1만 시간의 법칙 + 반응형 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 컴퓨터 화면에 맞춰서 디자인 요소들 픽셀에 정확히 맞추고, @media 태그를 이용해서 max-width: 360px 에 맞춘 반응형 페이지를 손보았다. 오늘 수업까지 듣고 디자인을 픽셀 단위로 맞추는 것까지는 실무의 범위인 것 같아서 제외하고, 더 반응형으로 만들어보려고... frontCSSprojecttutorial projecthtmlCSS